<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>炫酷纯CSS3星级评分动画特效|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
	<link rel="stylesheet" type="text/css" href="starability-minified/starability-all.min.css"/>
	<!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	<div class="htmleaf-container">
		<header class="htmleaf-header">
			<h1>炫酷纯CSS3星级评分动画特效 <span>Accessible rating forms with cute animations on top</span></h1>
			<div class="htmleaf-links">
				<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
				<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/css3/css3donghua/201605303534.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
			</div>
		</header>
		<section>
			<div class="starability-container">
			<h3>基本样式：</h3>
			<form>
			<fieldset class="starability-basic">
			      <legend>Basic star rating:</legend>

			      <input type="radio" id="rate5-1" name="rating" value="5" />
			      <label for="rate5-1" title="Amazing">5 stars</label>

			      <input type="radio" id="rate4-1" name="rating" value="4" />
			      <label for="rate4-1" title="Very good">4 stars</label>

			      <input type="radio" id="rate3-1" name="rating" value="3" />
			      <label for="rate3-1" title="Average">3 stars</label>

			      <input type="radio" id="rate2-1" name="rating" value="2" />
			      <label for="rate2-1" title="Not good">2 stars</label>

			      <input type="radio" id="rate1-1" name="rating" value="1" />
			      <label for="rate1-1" title="Terrible">1 star</label>
			    </fieldset>
			</form>
			</div>
		</section>
		<section>
			<div class="starability-container">
			<h3>向上滚动：slot</h3>
			<form>
			<fieldset class="starability-slot"> 
			      <legend>Basic star rating:</legend>

			      <input type="radio" id="rate5-2" name="rating" value="5" />
			      <label for="rate5-2" title="Amazing">5 stars</label>

			      <input type="radio" id="rate4-2" name="rating" value="4" />
			      <label for="rate4-2" title="Very good">4 stars</label>

			      <input type="radio" id="rate3-2" name="rating" value="3" />
			      <label for="rate3-2" title="Average">3 stars</label>

			      <input type="radio" id="rate2-2" name="rating" value="2" />
			      <label for="rate2-2" title="Not good">2 stars</label>

			      <input type="radio" id="rate1-2" name="rating" value="1" />
			      <label for="rate1-2" title="Terrible">1 star</label>
			    </fieldset>
			</form>
			</div>
		</section>
		<section>
			<div class="starability-container">
			<h3>发光动画：grow</h3>
			<form>
			<fieldset class="starability-grow"> 
			      <legend>Basic star rating:</legend>

			      <input type="radio" id="rate5-3" name="rating" value="5" />
			      <label for="rate5-3" title="Amazing">5 stars</label>

			      <input type="radio" id="rate4-3" name="rating" value="4" />
			      <label for="rate4-3" title="Very good">4 stars</label>

			      <input type="radio" id="rate3-3" name="rating" value="3" />
			      <label for="rate3-3" title="Average">3 stars</label>

			      <input type="radio" id="rate2-3" name="rating" value="2" />
			      <label for="rate2-3" title="Not good">2 stars</label>

			      <input type="radio" id="rate1-3" name="rating" value="1" />
			      <label for="rate1-3" title="Terrible">1 star</label>
			    </fieldset>
			</form>
			</div>
		</section>
		<section>
			<div class="starability-container">
			<h3>发光并旋转：growRotate</h3>
			<form>
			<fieldset class="starability-growRotate"> 
			      <legend>Basic star rating:</legend>

			      <input type="radio" id="rate5-4" name="rating" value="5" />
			      <label for="rate5-4" title="Amazing">5 stars</label>

			      <input type="radio" id="rate4-4" name="rating" value="4" />
			      <label for="rate4-4" title="Very good">4 stars</label>

			      <input type="radio" id="rate3-4" name="rating" value="3" />
			      <label for="rate3-4" title="Average">3 stars</label>

			      <input type="radio" id="rate2-4" name="rating" value="2" />
			      <label for="rate2-4" title="Not good">2 stars</label>

			      <input type="radio" id="rate1-4" name="rating" value="1" />
			      <label for="rate1-4" title="Terrible">1 star</label>
			    </fieldset>
			</form>
			</div>
		</section>
		<section>
			<div class="starability-container">
			<h3>淡入淡出：fade</h3>
			<form>
			<fieldset class="starability-fade"> 
			      <legend>Basic star rating:</legend>

			      <input type="radio" id="rate5-5" name="rating" value="5" />
			      <label for="rate5-5" title="Amazing">5 stars</label>

			      <input type="radio" id="rate4-5" name="rating" value="4" />
			      <label for="rate4-5" title="Very good">4 stars</label>

			      <input type="radio" id="rate3-5" name="rating" value="3" />
			      <label for="rate3-5" title="Average">3 stars</label>

			      <input type="radio" id="rate2-5" name="rating" value="2" />
			      <label for="rate2-5" title="Not good">2 stars</label>

			      <input type="radio" id="rate1-5" name="rating" value="1" />
			      <label for="rate1-5" title="Terrible">1 star</label>
			    </fieldset>
			</form>
			</div>
		</section>
		<section>
			<div class="starability-container">
			<h3>选择框效果：checkmark</h3>
			<form>
			<fieldset class="starability-checkmark"> 
			      <legend>Basic star rating:</legend>

			      <input type="radio" id="rate5-6" name="rating" value="5" />
			      <label for="rate5-6" title="Amazing">5 stars</label>

			      <input type="radio" id="rate4-6" name="rating" value="4" />
			      <label for="rate4-6" title="Very good">4 stars</label>

			      <input type="radio" id="rate3-6" name="rating" value="3" />
			      <label for="rate3-6" title="Average">3 stars</label>

			      <input type="radio" id="rate2-6" name="rating" value="2" />
			      <label for="rate2-6" title="Not good">2 stars</label>

			      <input type="radio" id="rate1-6" name="rating" value="1" />
			      <label for="rate1-6" title="Terrible">1 star</label>
			    </fieldset>
			</form>
			</div>
		</section>
		<div class="related">
		    <h3>如果你喜欢这个插件，那么你可能也喜欢:</h3>
		    <a href="http://www.htmleaf.com/jQuery/Rating-Star-Rating/201604053300.html">
			  <img src="related/1.jpg" width="300" alt="star-rating-svg | jQuery星级评分插件"/>
			  <h3>star-rating-svg | jQuery星级评分插件</h3>
			</a>
			<a href="http://www.htmleaf.com/jQuery/Rating-Star-Rating/201512252949.html">
			  <img src="related/2.jpg" width="300" alt="Ratyli-简单的jQuery星级评分插件"/>
			  <h3>Ratyli-简单的jQuery星级评分插件</h3>
			</a>
		</div>
	</div>
</body>
</html>